<template>
  <div class='home-page'>
    <homeBanner />
    <main class="w1200" v-once>
      <div class="hot-sale-box">
        <HotSale />
        <PopShops />
      </div>

      <WindShops class="shop-wind mt25" />
      <WaterShops class="shop-water mt25" />
      <EletricShops class="shop-eletric mt25" />
      <FireShops class="shop-fire mt25" />
      
      <News class="news mt25" />
      <Advertise class="advertise mt25" />
    </main>
    <Serve class="bc-white mt25" />
  </div>
</template>
<script>
import homeBanner from './banner.vue'
import HotSale from '@/components/hotSales/hotSales.vue'
import PopShops from '@/components/popShops/popShops.vue'
import WindShops from '@/components/windShops/windShops.vue'
import WaterShops from '@/components/waterShops/waterShops.vue'
import EletricShops from '@/components/eletricShops/eletricShops.vue'
import FireShops from '@/components/fireShops/fireShops.vue'
import News from '@/components/news/news.vue'
import Advertise from '@/components/advertise/advertise.vue'
import Serve from '@/components/serve/serve.vue'
export default {
  components: {
    homeBanner,
    HotSale,
    PopShops,
    WindShops,
    WaterShops,
    EletricShops,
    FireShops,
    News,
    Advertise,
    Serve
  },
  name: "",
  data() {
    return {};
  },
  methods: {
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.home-page {
  background-color: #f4f4f4;

  main{
    padding: 25px 0;
  }
  .hot-sale-box{
    display: flex;
    justify-content: space-between;
  }
}
</style>